<template>
  <div class="messageItem flex-row flex-vertical-center">
    <div class="left" :class="{ new: !data.is_read }">
      <vue-img :src="operater.avatar" class="avatar"></vue-img>
    </div>
    <div class="center flex-row flex-grow-limit flex-children-around flex-wrap">
      <div class="row1 flex-row flex-oneline">
        <strong class="black">{{ operater.nick_name }}&nbsp;</strong>
        <span>{{ ['', '赞了', '评论了'][data.message_type] }}&nbsp;</span>
        <strong class="black">我&nbsp;</strong>
        <span class="text-limit">{{ data.message_type === 2 ? `：${comment.content}` : `的发现` }}</span>
      </div>
      <div class="row2 flex-row flex-vertical-center flex-oneline">
        <small>{{ data.diff_time }}</small>
        <small class="color-danger deletedPrompt" v-if="isDeleted">该评论已被删除</small>
      </div>
    </div>
    <vue-img :src="data[data.f_table].img.split(',')[0]" class="right" 
      v-if="!isDeleted && data[data.f_table].img"
    ></vue-img>
  </div>
</template>

<script>
export default {
  props: ['data'],

  data (){
    return {
      
    }
  },

  mounted (){
    
  },

  computed: {
    user (){
      return this.data.user
    },

    operater (){
      return this.data.opera_user
    },

    comment (){
      return this.data.comment
    },

    isDeleted (){
      return this.data[this.data.f_table] === null
    },
  },

  methods: {
      
  }
}
</script>

<style lang="less" scoped>
.black{
  color: black;
}

.messageItem{
  height: 75px;
  padding: 7px 10px;
  background-color: white;
  box-sizing: border-box;
  margin-top: 3px;
  color: @subtext;

  .left{
    width: 50px;
    height: 50px; 
    min-width: 50px;
    position: relative;

    &.new::before{
      content: '';
      display: block;
      width: 12px;
      height: 12px;
      background-color: @danger;
      border-radius: 50%;
      position: absolute;
      top: 0;
      right: 0;
    }
  }

  .center{
    margin-left: 10px;
    height: 100%;

    .row1{
      white-space: nowrap;
    }
  }

  .right{
    width: 50px;
    height: 50px;
    min-width: 50px;
    margin-left: 10px;
  }

  .avatar{
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .deletedPrompt{
    margin-left: 10px;
  }
}

</style>